<template>
  <div>
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clearList">
      <template #btns>
        <el-button v-if="meta.indexOf('OrderListExport') > -1" :loading="subLoading" type="primary" @click="handleExport">{{ $t('message.daochu') }}</el-button>
      </template>
    </QueryForm>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-tableb">
      <el-table-column align="center" :label="$t('message.ddbh')" min-width="220" prop="id" show-overflow-tooltip>
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="handleDetail(scope.row)">{{
            scope.row.id
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.memberInfo')" min-width="220" prop="memberInfo" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.productName')" min-width="120" prop="productName" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.jgy')" min-width="100" prop="price" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.sfy')" min-width="100" prop="realPrice" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.zffs')" min-width="120" prop="payMethodName" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.paytime')" min-width="160" prop="payTime" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.tkje')" min-width="100" prop="refundMoney" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.tksj')" min-width="160" prop="refundTime" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.xdsj')" min-width="160" prop="createTime" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.bz')" min-width="120" prop="note" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.ddzt')" min-width="120" prop="payStatusName" fixed="right" show-overflow-tooltip />
      <el-table-column :label="$t('message.caozuo')" min-width="130" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button v-if="
                scope.row.payStatus == 0 && meta.indexOf('CancelOrder') > -1
              " v-preventReClick type="text" @click="onceAgain(scope.row.id, '0')">{{ $t('message.qxdd') }} </el-button>
            <el-button v-if="scope.row.payStatus == 3 && meta.indexOf('Refund') > -1" v-preventReClick type="text" @click="onceAgain(scope.row.id, '1')">{{ $t('message.tk') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations :total="total" :page="pagination.page" @current-change="getList" @SizeChange="handleSizeChange" />
    <Detail ref="DetailRef" />
  </div>
</template>

<script>
import { queryFormConfig } from './orderRecord'
import { getOrderTypeQuery, allConfigList, momMOrderList, momMOrderListEx, momCancelOrder, momRefund } from '@/api'
import dayjs from 'dayjs'
import Detail from './orderDetail.vue'
import QueryForm from '@/components/QueryForm'
export default {
  components: {
    Detail,
    QueryForm
  },
  data () {
    return {
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      meta: [],
      total: 0,
      listLoading: false,
      queryFormConfig,
      subLoading: false,

      filters: {
        selDate: []
      }
    }
  },
  created () {
    this.meta = this.$route.meta.buttons || []
    let time = []
    const start = new Date()
    const end = new Date()
    start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
    time = [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
    this.$set(this.filters, 'selDate', time)
    this.getList()
    this.getOrderStatusList()

    allConfigList({ param: { type: '2', code: 'PAY_METHOD_MOMENTS' } })
      .then((res) => {
        if (res.errorCode !== '000000') return
        this.payTypes = res.recordList
        const arr = res.recordList
        arr.forEach(e => {
          e.label = e.name
        })
        this.queryFormConfig.formItems[4].options = arr
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    getOrderStatusList () {
      getOrderTypeQuery({ param: {} }).then(res => {
        this.queryFormConfig.formItems[3].options = res.recordList || []
      })
    },
    handleExport () {
      this.subLoading = true
      const { filters } = this
      const param = { ...filters }
      if (param.selDate.length > 0) {
        param.startTime = param.selDate[0] + ' 00:00:00'
        param.endTime = param.selDate[1] + ' 23:59:59'
      }
      momMOrderListEx({ param })
        .then((res) => {
          this.subLoading = false
          if (res.errorCode === '000000') {
            if (window.Android) {
              Android.downloadFile(res.record.showUrl);
              return
            }
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => {
          this.subLoading = false
        })
    },
    onceAgain (id, type) {
      const message = type === '1' ? this.$t('message.qrtdxzdddtc') : this.$t('message.qrqxzxdddtc')
      const title = type === '1' ? this.$t('message.tk') : this.$t('message.qxdd')
      const fn = type === '1' ? momRefund : momCancelOrder
      this.$confirm(message, title, {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      }).then(() => {
        fn({ param: { id } }).then(res => {
          this.$message.success(`${title}` + this.$t('message.success'))
          this.getList()
        })
      })
    },
    handleDetail (item) {
      this.$refs.DetailRef.getOrderDetail(item.id)
      this.$refs.DetailRef.isShow = true
    },
    getList (page) {
      this.listLoading = true
      const { pagination, filters } = this
      const param = { ...filters }
      if (page) {
        this.pagination.page = page
      }
      if (param.selDate.length > 0) {
        param.startTime = param.selDate[0] + ' 00:00:00'
        param.endTime = param.selDate[1] + ' 23:59:59'
      }
      momMOrderList({ pagination, param })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.total = res.totalCount
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleSizeChange (val) {
      this.pagination.rows = val
      this.getList(1)
    },
    clearList () {
      this.filters = {
        selDate: []
      }
      this.getList(1)
    }
  }
}
</script>

<style>
</style>
